<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-01 17:22:11
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 13:41:43
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\adoptMsg_modal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-button class="addBtn" @click="handleAdd"> 新增</a-button>

    <a-modal
      v-model:open="isOpen"
      :title="adoptNumber > 0 ? '修改领养信息' : '新增领养信息'"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="取消"
      okText="确定"
    >
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        :rules="rules"
        ref="formRef"
      >
        <a-form-item label="动物编号" name="animalNumbers">
          <a-input-number
            v-model:value="formState.animalNumbers"
            style="margin-left: 20px"
          />
        </a-form-item>
        <a-form-item label="领养条件" name="term">
          <a-textarea v-model:value="formState.term" />
        </a-form-item>

        <a-form-item label="动物介绍" name="animalIntroduce">
          <a-textarea v-model:value="formState.animalIntroduce" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { appAdopt, updataAdopt, getAdoptById } from "@/service/api.js";
import { message } from "ant-design-vue";

const props = defineProps({
  adoptNumber: { type: Number },
});
const emits = defineEmits(["handleAdoptNumber", "handleGetData"]);
const formRef = ref(null);
const adoptNumber = ref(0);
watch(
  () => props.adoptNumber,
  (newV, oldV) => {
    // 回显
    // old 0 new 1
    // new 0 old 1
    // new 3 old  0
    // new 0 old 3

    if (newV !== 0) {
      adoptNumber.value = newV;
      isOpen.value = true;
      reShow(newV);
    }
  }
);

const isOpen = ref(false);
const formState = ref({
  animalNumbers: null,
  animalIntroduce: "",
  term: "",
});

const handleOk = async (e) => {
  console.log(e);
  // 校验
  formRef.value
    .validate()
    .then(async () => {
      // 通过校验
      //  判断有无adoptNumbers 有修改  无添加c

      if (adoptNumber.value > 0) {
        // 修改

        const updataRes = await updataAdopt({ ...formState.value });
        if (updataRes.code === 1) {
          message.success("修改成功");
          emits("handleGetData", "");
        } else message.error("修改失败");
      } else {
        // 新增
        const addRes = await appAdopt({ ...formState.value });
        console.log(addRes);
        if (addRes.code === 1) {
          formState.value = {};
          message.success("新增成功");
          emits("handleGetData", "");
        } else message.error("新增失败");
      }
    })

    .catch((err) => {
      // 没通过校验
    });
};
const handleCancel = () => {
  isOpen.value = false;
  emits("handleAdoptNumber", 0);
};
// 添加/修改
const handleAdd = () => {
  isOpen.value = true;
};
//回显
const reShow = async (adoptNum) => {
  console.log(adoptNum);
  const res = await getAdoptById({ adoptNumbers: adoptNum });
  console.log(res);
  if (res.code === 1) {
    formState.value = res.data;
  }
};

// 自定义校验
// 编号校验
const validatorUserNumbers = (rule, value) => {
  if (value < 1) {
    return Promise.reject("编号必须大于或等于1");
  } else return Promise.resolve();
};
// 校验
const rules = {
  adoptNumbers: [{ validator: validatorUserNumbers, required: true }],
  animalNumbers: [{ validator: validatorUserNumbers, required: true }],
  animalIntroduce: [{ required: true }],
  term: [{ required: true }],
};
</script>
<style scoped>
.addBtn {
  position: relative;

  margin-right: 40px;
  width: 100px;
}
</style>
